<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 必要的标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA=="
          href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        #navbar-left{
            background:#3B3E47;
            height: 1000px;
        }
        #window{
            height: 1000px;
            background: #EBEBEB;
        }
        a{
            text-decoration: none;
            color: #80878D;
        }

        #main_nav{
            height: 600px;
            list-style: none;
            margin-top: 30px;

        }
        li{
            margin-top: 25px;
            list-style-type: none;

        }
        a:hover{
            color: aliceblue;
            text-decoration: none;
        }
        img{
            width: 25px;
        }
        .img_right{
            width: 15px;
            margin-left: 20px;
        }
        .img_left{
            margin-right: 30px;
        }
        .ul_inside{
            height: auto;
        }

        .ul_inside li a{
            text-decoration: none;
            color: #80878D;
        }
        .ul_inside li a:hover{
            text-decoration: none;
            color: #80878D;
        }

        form div{

            width: 430px;
            height: auto;
            /*margin-top: 50px;*/
            margin-left: auto;
            margin-right: auto;
            padding-top: 50px;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }

        p{
            text-align: center;
            line-height: 30px;
        }
        img{
            width:30px;
            margin-right: 10px;
        }
        .input_w{
            width: 250px;
            border-radius:5px;
            border: solid 1px;
        }
        .input_w1{
            width: 250px;
            height: 35px;
            border-radius:5px;
            border: solid 1px;
        }
        .groups{
            height: 35px;
            border-radius:5px;
            width: 250px;

        }

        .btn-w{
            color: white;
            background:#3B3E47;
            border: none;
            width: 75px;
            height: 35px;
            text-align: center;
            line-height: 35px;

        }

        #new_table{
            margin-left: 50px;
            height: 250px;
        }
        td{
            text-align: center;
        }
        tr td:nth-of-type(3) {
            text-align: right;
        }
        .btn_h:hover{
            color: aliceblue;
            background: #C8C2C2;
        }
        .btn_h:visited{
            border: none;
            color: aliceblue;
            background: #C8C2C2;
        }
        .btn_a{
            color: white;
            background:#3B3E47;
            display: inline-block;
            width: 60px;
            height: 40px;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
        }
        .btn_a:hover{
            color: aliceblue;
            background: #C8C2C2;
            text-decoration: none;
        }
        .img_left{
            width: 25px;
        }
        .bgcolor{
            background-color: #ebebeb;
        }

        .box_1 div:nth-of-type(1){
            width: 530px;
            height: 30px;
            border-bottom: solid 1px;
            background-color:#62B85F;
            line-height: 30px;
            color: white;
            font-family: "楷体";
            font-size: 15px;
            text-align: center;
        }
        .box_1 div:nth-of-type(2){
            width: 530px;
            height: 50px;
            font-family: "楷体";
            font-size: 20px;
            text-indent: 2em;
            line-height: 1.5;
            padding-top: 10px;
        }
        img{
            width: 25px;
        }
    </style>
    <script type="text/javascript">
        function validateIt1(inputelement){

            if(inputelement.validity.patternMismatch){
                inputelement.setCustomValidity('用户名必须是2到5个中文字符');
            }else{
                inputelement.setCustomValidity(''); //输入内容符合验证条件
            }
            return true;
        }






    </script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2" id="navbar-left">
            <ul id="main_nav" >
                <li><img src="/img/笑脸.png" alt="">&nbsp;<a href="#">欢迎,通讯录管理系统!</a></li>

                <li class="ul_outside"><a href="http://localhost:8080/"><img src="/img/左箭头.png"></a></li>
                <li><a href="http://localhost:8080/tel/new">新建联系人</a></li>
                <li><a href="http://localhost:8080/allLinkman">所有联系人</a></li>

                <li><a href="http://localhost:8080/addGroup/display">查看/编辑分组</a></li>
                <li><a href="http://localhost:8080/linkman/">查看/编辑联系人</a></li>
                <li><a href="http://localhost:8080/login?logout">退出登录</a></li>
            </ul>
        </nav>
        <div class="col-md-10" id="window">

                <div id="d_f">

                <form   th:action="@{save}" th:object="${Linkman}" method="POST">
                    <input type="hidden" th:field="${Linkman.linkman_id}">
                    <div id="new_content">
                        <h3 align="center">新建联系人</h3>
                        <table id="new_table">
                            <tr>

                                <td><img src="/img/用户_new.png" alt="姓名"></td>
                                <td><input th:field="${Linkman.name}" type="text" placeholder="请输入姓名" class="input_w bgcolor" required pattern="^[\u4e00-\u9fa5]{2,5}$" oninvalid="validateIt1(this)" oninput="validateIt1(this)"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><img src="/img/性别_new.png" alt="性别"></td>
                                <td>
                                    <select name="groups"  class="input_w1 bgcolor" th:field="${Linkman.sex}">
                                        <option value="请选择性别" disabled>---------请选择性别-----------</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><img src="/img/电话_new.png" alt="电话号码"></td>
                                <td>

                                    <select name="groups" class="groups bgcolor" th:field="*{tels}" multiple="multiple">
                                        <option value="1">----请找到联系人的手机号码---</option>

                                        <option value="2" th:each="Tel : ${tels}" th:value="${Tel.tel_Id}" th:text="${Tel.tel}" >1</option>
                                    </select>


                                </td>
                            </tr>
                            <tr>
                                <td><img src="/img/分组_new.png" alt="分组"></td>
                                <td>
                                    <!--分组选择的下拉列表框-->
                                    <select name="groups" class="groups bgcolor" th:field="*{groupings}">
                                        <option value="1">---请选择分组---</option>
                                        <option value="2" th:each="group : ${groupings}" th:value="${group.groupId}" th:text="${group.groupName}">1</option>
                                    </select>
                                </td>
                                <td><a class="btn_a" href="http://localhost:8080/addGroup/new" >新建</a></td>
                            </tr>

                        </table>

                    </div>
                    <p><input type="submit" class="btn-w btn_h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" class="btn-w btn_h"></p>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>